import React, { useState } from 'react';
import { Card, Table, Tag, Space, Button, Modal, Form, Input, Select, DatePicker } from 'antd';
import { AuditOutlined, SearchOutlined } from '@ant-design/icons';
import './styles.css';

const { TextArea } = Input;
const { RangePicker } = DatePicker;

// 模拟交易数据
const mockTransactions = [
  {
    id: 'TX2024031801',
    orderNo: 'ORDER2024031801',
    transactionType: 'data_exchange',
    provider: '数据提供方A',
    consumer: '数据使用方B',
    amount: 5000,
    dataType: '个人信息',
    status: 'pending',
    createTime: '2024-03-18 10:00:00',
    riskLevel: 'high',
  },
  {
    id: 'TX2024031802',
    orderNo: 'ORDER2024031802',
    transactionType: 'data_service',
    provider: '数据提供方C',
    consumer: '数据使用方D',
    amount: 3000,
    dataType: '企业信息',
    status: 'pending',
    createTime: '2024-03-18 11:30:00',
    riskLevel: 'medium',
  },
  {
    id: 'TX2024031803',
    orderNo: 'ORDER2024031803',
    transactionType: 'api_service',
    provider: '数据提供方E',
    consumer: '数据使用方F',
    amount: 2000,
    dataType: '位置信息',
    status: 'audited',
    createTime: '2024-03-18 14:20:00',
    riskLevel: 'low',
  },
];

const TransactionAudit: React.FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedTransaction, setSelectedTransaction] = useState<any>(null);
  const [form] = Form.useForm();

  const columns = [
    {
      title: '交易编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
      key: 'orderNo',
    },
    {
      title: '交易类型',
      dataIndex: 'transactionType',
      key: 'transactionType',
      render: (type: string) => {
        const typeMap = {
          data_exchange: '数据交换',
          data_service: '数据服务',
          api_service: 'API服务',
        };
        return typeMap[type as keyof typeof typeMap];
      },
    },
    {
      title: '数据提供方',
      dataIndex: 'provider',
      key: 'provider',
    },
    {
      title: '数据使用方',
      dataIndex: 'consumer',
      key: 'consumer',
    },
    {
      title: '交易金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `¥${amount.toLocaleString()}`,
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      key: 'dataType',
    },
    {
      title: '风险等级',
      dataIndex: 'riskLevel',
      key: 'riskLevel',
      render: (level: string) => {
        const colors = {
          high: 'red',
          medium: 'orange',
          low: 'green',
        };
        return <Tag color={colors[level as keyof typeof colors]}>{level.toUpperCase()}</Tag>;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          pending: { color: 'gold', text: '待审核' },
          audited: { color: 'green', text: '已审核' },
          rejected: { color: 'red', text: '已拒绝' },
        };
        const { color, text } = statusMap[status as keyof typeof statusMap];
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button
            type="primary"
            icon={<AuditOutlined />}
            disabled={record.status !== 'pending'}
            onClick={() => handleAudit(record)}
          >
            审核
          </Button>
        </Space>
      ),
    },
  ];

  const handleAudit = (transaction: any) => {
    setSelectedTransaction(transaction);
    setIsModalVisible(true);
    form.setFieldsValue({
      id: transaction.id,
      orderNo: transaction.orderNo,
      transactionType: transaction.transactionType,
      provider: transaction.provider,
      consumer: transaction.consumer,
    });
  };

  const handleModalOk = () => {
    form.validateFields().then((values) => {
      console.log('Audit values:', values);
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  return (
    <div className="transaction-audit">
      <Card title="交易审计">
        <div className="search-form" style={{ marginBottom: 16 }}>
          <Form layout="inline">
            <Form.Item label="交易编号">
              <Input placeholder="请输入交易编号" />
            </Form.Item>
            <Form.Item label="订单号">
              <Input placeholder="请输入订单号" />
            </Form.Item>
            <Form.Item label="交易类型">
              <Select style={{ width: 120 }} placeholder="请选择">
                <Select.Option value="data_exchange">数据交换</Select.Option>
                <Select.Option value="data_service">数据服务</Select.Option>
                <Select.Option value="api_service">API服务</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="交易时间">
              <RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary" icon={<SearchOutlined />}>
                搜索
              </Button>
            </Form.Item>
          </Form>
        </div>
        <Table columns={columns} dataSource={mockTransactions} rowKey="id" />
      </Card>

      <Modal
        title="交易审核"
        visible={isModalVisible}
        onOk={handleModalOk}
        onCancel={() => setIsModalVisible(false)}
        width={800}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="id" label="交易编号">
            <Input disabled />
          </Form.Item>
          <Form.Item name="orderNo" label="订单号">
            <Input disabled />
          </Form.Item>
          <Form.Item name="transactionType" label="交易类型">
            <Input disabled />
          </Form.Item>
          <Form.Item name="provider" label="数据提供方">
            <Input disabled />
          </Form.Item>
          <Form.Item name="consumer" label="数据使用方">
            <Input disabled />
          </Form.Item>
          <Form.Item
            name="auditResult"
            label="审核结果"
            rules={[{ required: true, message: '请选择审核结果' }]}
          >
            <Select placeholder="请选择审核结果">
              <Select.Option value="approved">通过</Select.Option>
              <Select.Option value="rejected">拒绝</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="auditComment"
            label="审核意见"
            rules={[{ required: true, message: '请输入审核意见' }]}
          >
            <TextArea rows={4} placeholder="请输入审核意见" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default TransactionAudit; 